<!-- 已到期应付 应收 & 已逾期 欠款-->
<template>
  <a-card
    :title="title"
    style="height: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #extra>
      <a-radio-group v-model:value="activeTab" button-style="solid" size="small" @change="getData">
        <a-radio-button value="1">{{billType === 'bill' ? '应收' : '租客'}}</a-radio-button>
        <a-radio-button value="2">{{billType === 'bill' ? '应付' : '房东'}}</a-radio-button>
      </a-radio-group>
    </template>
    <a-spin :spinning="spinning">
      <div class="price-box">
        <div class="price-total">
          <div class="total-text">￥{{total || 0}}</div>
          <div class="total-tip">{{tips}}</div>
        </div>
        <div class="price-chart">
          <div class="price-chart-item" v-for="(item, index) in list" :key="index">
            <div class="price-title">
              {{item.name}}
            </div>
            <div class="price-progress">
              <a-progress
                :percent="item.percent"
                :strokeWidth="16"
                :showInfo="false"
                status="normal"
                strokeColor="#6395fa"
                trailColor="#e5efff"
              />
              <a-tooltip placement="topLeft" :title="'￥' + item.num">
                <div class="progress-info">
                  ￥{{item.num}}
                </div>
              </a-tooltip>

            </div>
          </div>
        </div>
      </div>
    </a-spin>

  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  reactive,
  toRefs,
} from "vue";
import request from "../../../common/utils/request";
import {message} from "ant-design-vue";

export default defineComponent({
  name: "progressBill",
  props: {
    billType: {
      type: String,
      default: '',  // 收支 bill  欠款 arrears
    },
    title: {
      type: String,
      default: '',
    },
    tips: {
      type: String,
      default: '',
    }
  },
  components: {

  },
  setup(props, context) {
    const state = reactive({
      list: [
        {
          name: '今日到期',
          percent: 0,
          num: 0,
        },
        {
          name: '逾期1-3天',
          percent: 0,
          num: 0,
        },
        {
          name: '逾期4-10天',
          percent: 0,
          num: 0,
        },
        {
          name: '逾期超10天',
          percent: 0,
          num: 0,
        },
      ],
      spinning: false,
      activeTab: '1',
      total: 0,
      listTimer: null,
    })


    const getData = () => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        let url = props.billType === 'bill' ? '/workbench/overduePayment' : props.billType === 'arrears' ? '/workbench/overdueOwnerBill' : ''
        let params = {};
        if (props.billType === 'bill') {
          params.bill_type = state.activeTab;
        } else {
          params.tab = state.activeTab;
        }
        request.get("/org", url, params).then((res) => {
          if (props.billType === 'bill') {
            state.total = res?.needAmountTotal || 0;
          } else {
            state.total = res?.amountTotal || 0;
          }
          state.list.forEach((item, index) => {
            item.num = res[`needAmount${index + 1}`];
            item.percent = (item.num / state.total)*100;
          })
          state.spinning = false;
        }).catch((err) => {
          state.spinning = false;
        })
      }, 500)
    };

    getData();

    return {
      ...toRefs(state),
      getData,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.price-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .price-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    .total-text {
      font-size: 24px;
      color: #666;
      margin-bottom: 6px;
    }
    .total-tip {
      font-size: 14px;
      height: 26px;
      padding: 0 12px;
      line-height: 26px;
      color: #f27f2c;
      border-radius: 14px;
      background-color: #fff1c0;
    }
  }
  .price-chart {
    margin-top: 36px;
    margin-bottom: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-item {
      display: flex;
    }
  }
  .price-title {
    width: 100px;
  }
  .price-progress {
    flex: 1;
    display: flex;
  }
}
.progress-info {
  margin-left: 10px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
:deep(.ant-radio-button-wrapper:first-child) {
  border-radius: 28px 0 0 28px;
}
:deep(.ant-radio-button-wrapper:last-child) {
  border-radius: 0 28px 28px 0;
}
:deep(.ant-radio-button-wrapper) {
  padding: 0 8px;
}
</style>